<template>
	<view class="checkWrap">
		<view class="checkBox">
			<view class="checkBar">
				<view class="slide">
					<view :class="'moveBac '+(isAnimation?'animation':'')+(isSuccess?' moveBacSuccess':'')" :style="'width:'+(blockLeft+6)+'rpx;background-color:'+swiperColor"></view>
					<text :class="(isSuccess?'swiperTipsSuccess':'swiperTips')">{{isSuccess?'校验成功':'请按住滑块，拖动到最右边'}}</text>
					<view :class="'swiperBlock '+(isAnimation?'animation':'')+(isSuccess?' successBlock':'') "  :style="'left:'+blockLeft+'rpx'"  @touchstart="touchstartHandle"  @touchmove.stop.prevent="touchmoveHandle"  @touchend="touchendHandle"  ></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		show: {
			type: Boolean,
			default: false
		},
		swiperColor: {
			type: String,
			default: '#009cd0'
		},
		title: {
			type: String,
			default: '人机校验'
		},
		barWidth:{
			type:Number,
			default:568
		}
	},
	data() {
		return {
			startInfo:{},
			blockLeft:0,
			isAnimation:false,
			isSuccess:false
		};
	},
	computed: {
		trueMoveableW:function(){
			return this.barWidth-86
		}
	},
	watch:{
		show:function(val){
			if(!val){
				this.blockLeft=0
				this.isSuccess=false
			}
		}
	},
	created() {},
	mounted() {},
	methods: {
		//手指按下
		touchstartHandle({changedTouches}){
			if(this.isSuccess){
				return
			}
			this.isAnimation=false
			this.startInfo=changedTouches[0]
		},
		// 手指移动
		touchmoveHandle({changedTouches}){
			if(this.isSuccess){
				return
			}
			let blockLeft=changedTouches[0].clientX-this.startInfo.clientX
			let blockLeftRpx = blockLeft/(uni.upx2px(100)/100)
			if(blockLeftRpx<0){
				this.blockLeft=0
			}else{
				this.blockLeft=blockLeftRpx<=this.trueMoveableW?blockLeftRpx:this.trueMoveableW
			}
		},
		// 手指离开
		touchendHandle(e){
			if(this.isSuccess){
				return
			}
			if(this.trueMoveableW===this.blockLeft){
				this.isSuccess=true
				this.$emit('checkResult',{
					detail:'success'
				})
			}else{
				this.isAnimation=true
				let timeid=setTimeout(()=>{
					clearTimeout(timeid)
					this.isAnimation=false
				},500)
				this.blockLeft=0
				this.$emit('checkResult',{
					detail:'fail'
				})
			}
		},
		closeHumanCheckHandle(){
			this.$emit('close')
		}
	}
};
</script>

<style scoped>
view {
	box-sizing: border-box;
}
.content {
	position: fixed;
	background-color:rgb(51,51,51,0.8);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1001;
}
.checkWrap {
	width: 690rpx;
	border-radius: 8rpx;
	background-color: #ffffff;
	overflow: hidden;
}
.checkWrap .title {
	color: #808080;
	font-size: 30rpx;
	padding: 16rpx;
	display: flex;
	justify-content: space-between;
}

.checkWrap .checkBox {
	background-color: #f2f2f2;
}
.checkBox .checkBar {
	width: 690rpx;
	padding: 16rpx;
}
.checkBox .slide {
	width: 690rpx;
	height: 86rpx;
	line-height: 86rpx;
	border-radius: 8rpx;
	background-color: #dddddd;
	position: relative;
	font-size: 26rpx;
	overflow: hidden;
}
.moveBac{
	background-color: #009cd0;
	width: 690rpx;
	height: 100%;
}
.moveBacSuccess{
	background-color: #06a17e !important;
}
.swiperTips{
	position: absolute;
	left: 0;
	top: 0;
	width: 690rpx;
	color: #FFFFFF;
	text-align: center;
	background: -webkit-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));
	animation: tipsBlinkan 3s infinite;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.swiperTipsSuccess{
	position: absolute;
	left: 0;
	top: 0;
	width: 690rpx;
	text-align: center;
	color: #FFFFFF;
}
.slide .swiperBlock {
	width: 86rpx;
	height: 100%;
	border-radius: 8rpx;
	background-color: #ffffff;
	/* box-shadow: 0 0 6px 1px #b3b3b3; */
	background-image: url('');
	background-repeat: no-repeat;
	background-size: 46rpx;
	background-position: center;
	position: absolute;
	left: 0px;
	top: 0;
	border: 1px solid #808080;
}
.successBlock{
	background-image: url('') !important;
}
.animation{
	/* transition: all 0.5s; */
}

@keyframes tipsBlinkan{
	0% {
	    background-position: -200rpx 0;
	}
	100% {
	    background-position: 200rpx 0;
	}
}
</style>
